.top_navs {
  // 為了讓容器的高度等於父元素的高度
  align-self: stretch;

  display: flex;
  align-items: stretch;

  .item,
  .item_active {
    &:extend(.transition);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    padding: 0 @spacing;
    color: @text-color;
    text-decoration: none;

    &::after {
      &:extend(.transition);
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 1em;
      height: 2px;
      display: block;
      content: '';
      transform: translate(-50%, 1px);
    }
  }

  .item_active {
    color: @active-color;
    &::after {
      background-color: @active-color;
    }
  }
}
